<template>
    <view class="customer-tab-bar">
        <view class="tab" v-for="(item, i) in tabs" :key="item.icon" @click="tabSwitch(i)">
            <cdn-img :src="item.active" class="tabicon" mode="aspectFit" v-show="config.tabIndex===i"/>
            <cdn-img :src="item.unactive" class="tabicon" mode="aspectFit" v-show="config.tabIndex!==i"/>
            <view class="name">{{item.title}}</view>
        </view>
    </view>
</template>

<script setup>
import { ref, onBeforeMount, watch } from 'vue'
// import { switchTab } from '@/router'
import { switchTab } from '@tarojs/taro'
import { useConfigStore, useUserStore } from '@/stores'
// import "@nutui/nutui-taro/dist/style.css";

const config = useConfigStore()
const user = useUserStore()

const tabs = ref([
    { title: '首页', icon: 'home', path: '/pages/home/index', active: '/static/tabBar/home_h.png', unactive: '/static/tabBar/home.png'},
    { title: '达人', icon: 'category', path: '/pages/rank/index', active: '/static/tabBar/rank_h.png', unactive: '/static/tabBar/rank.png' },
    { title: '任务', icon: 'find', path: '/pages/task/index', active: '/static/tabBar/task_h.png', unactive: '/static/tabBar/task.png' },
    { title: '个人中心', icon: 'my', path: '/pages/ucenter/index' , active: '/static/tabBar/user_h.png', unactive: '/static/tabBar/user.png'}
])

const tabSwitch = (index) => {
    config.setSelecTab(index)
    const url = tabs.value[index].path
    switchTab({ url })
}
onBeforeMount(()=>{
    if(user.mode===2){
        tabs.value[1].title = '摄影师'
    }
})
watch(()=> user.mode, (mode) => {
    tabs.value[1].title = (mode===2) ? '摄影师' : '达人'
})
</script>

<style lang="scss">
.customer-tab-bar{
    height: 90rpx;
    width: 100%;
    display: flex;
    background-color: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
    box-shadow: -1px 0 5px #E5E5E5;
    .tab{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .tabicon{
        width: 40rpx;
        height: 40rpx;
        .cdn{
            width: 100%;
            height: 100%;
        }
    }
    .name{
        font-size: 11px;
        color: #666;
    }
}
</style>
